<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /* 液晶显示背景css */
            .led{background-color: #242424; width: 600px; height: 400px; float: left; margin: 5px; padding: 30px;}
            /* 状态栏显示css */
            .ledState{color: #ffffff; width: 600px; height: 80px; font-size: 60px; text-align: center;} 
            /* 安全温度及设定时间css */
            .ledSafeTimeVal{color: #ffffff; width: 600px; height: 80px; font-size: 30px; text-align: right;} 
            .ledSafeVal{width: 270px; height: 50px; float: left; margin: 10px; padding: 5px; }
            .ledSafeValNum{width: 200px; height: 50px; float: left; font-size: 60px;}
            .ledTimeVal{width: 270px; height: 50px; float: right; margin: 10px; padding: 5px; }
            .ledTimeValNum{width: 200px; height: 50px; float: right; font-size: 60px;}
            /* 实时显示数据css */
            .ledChangingVal{color: #ffffff; width: 600px; height: 160px; font-size: 30px; text-align: right;} 
            .ledChangingTempVal{width: 270px; height: 130px; float: left; margin: 10px; padding: 5px;}
            .ledChangingTempValNum{width: 200px; height: 130px; float: left; font-size: 100px;}
            .ledChangingSpeedVal{width: 270px; height: 130px; float: right; margin: 10px; padding: 5px;}
            .ledChangingSpeedValNum{width: 200px; height: 130px; float: left; font-size: 100px;}
            /* 设定值显示css */
            .ledSetVal{color: #b89602; width: 600px; height: 80px; font-size: 30px; text-align: right;}
            .ledSetTempVal{width: 270px; height: 50px; float: left; margin: 10px; padding: 5px; }
            .ledSetTempValNum{width: 200px; height:50px; float: left; font-size: 60px; }            
            .ledSetSpeedVal{width: 270px;height: 50px; float: right; margin: 10px; padding: 5px; }
            .ledSetSpeedValNum{width: 200px; height: 50px; float: left; font-size: 60px; }
            /* 启停按钮和文字 */
            /* .btn{padding: 20px; background: url(buttonRunStop.png) 60px 60px no-repeat;} */
            #knob{float:left; width: 120px; height: 120px; margin: 20px; padding: 20px; }
            #knobPic{width: 100px; height: 100px; margin: 5px; padding: 5px;}
            #knobChar{text-align: center;}
            /* led字体显示 */
            .degree{ float: right; text-align: center;}
            .rpm{ float: right; text-align: center;}
            .sandclock{ float: left; text-align: center;}
        </style>
        <script type="text/javascript" src="../js/paho-mqtt.js"></script>
        <!-- TODO:动态加载js文件 -->
        <script type="text/javascript" src="../js/display.js"></script>
        <!-- <script type="text/javascript" src="../js/redis_util.js"></script> -->
    </head>
    <body>
        <div id="ledDisplay" class="led" >
            <!-- 液晶显示部分 -->
            <script>
                // led screen display
                ledDisplay();
            </script>
            <div id="state" class="ledState">
                <!-- 状态显示部分 -->
            </div>
            <!-- 第二排，显示安全温度和设定时间 -->
            <div class="ledSafeTimeVal">
                <div class="ledSafeVal">
                    <div  id="safeTemp" class="ledSafeValNum">
                        <!-- 安全温度 -->
                    </div>
                    <div class="degree">
                        ℃
                    </div>
                </div>
                <div class="ledTimeVal">
                    <div class="sandclock">
                        <!-- pic -->
                    </div>
                    <div id="time" class="ledTimeValNum">
                        <!-- 设定时间 -->
                    </div>
                </div>                
            </div>
            <!-- 第三排，显示实时温度和速度 -->
            <div class="ledChangingVal">
                <div class="ledChangingTempVal">
                    <div id="temp" class="ledChangingTempValNum">
                        <!-- 实时温度 -->
                    </div>
                    <div class="degree">
                        ℃
                    </div>
                </div>
                <div class="ledChangingSpeedVal">
                    <div id="speed" class="ledChangingSpeedValNum">
                        <!-- 实时转速 -->
                    </div>
                    <div class="rpm">
                        rpm
                    </div>
                </div>
            </div>
            <!-- 第四排，显示设定温度和速度 -->
            <div class="ledSetVal">
                <div class="ledSetTempVal">
                    <div id="setTemp" class="ledSetTempValNum">
                        <!-- 设定温度 -->
                    </div>
                    <div class="degree">
                        ℃
                    </div>
                </div>
                <div class="ledSetSpeedVal">
                    <div id="setSpeed" class="ledSetSpeedValNum">
                        <!-- 设定转速 -->
                    </div>
                    <div class="rpm">
                        rpm
                    </div>
                </div>
            </div>
        </div>
        <div id="knob">
            <!-- 大旋钮 -->
            <!-- knobRunStop -->
            <div id="knobPic">
                <script>
                    // function 启动停止
                    function btnRunStop(){
                        //点击启动停止接口
                        alert("hello");
                    };
                </script>
                <img src="./buttonRunStop.png" alt="启动/停止" width="100px" height="100px" id="btnRunStop" onclick="btnRunStop()">
            </div>
            <div id="knobChar">
                Run/Stop
            </div>
        </div>
    </body>
</html>